<template>
  <!-- #ifdef H5 -->
  <template v-if="customizeTag === 'grid-layout'">
    <grid-layout
      v-model:layout="bindingLayout"
      v-bind="$attrs"
      :is-draggable="false"
      :style="$attrs.style"
      class="grid-layout-container"
    >
      <template #default="{ gridItemProps }">
        <slot :gridItemProps="gridItemProps" :style="$attrs.style"></slot>
      </template>
    </grid-layout>
  </template>
  <el-row v-model:layout="bindingLayout" v-bind="$attrs" :tag="customizeTag" v-else>
    <template #default="rowSlotProps">
      <slot :gridItemProps="rowSlotProps?.gridItemProps ?? {}"></slot>
    </template>
  </el-row>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <uni-row v-bind="$attrs">
    <template #default>
      <slot></slot>
    </template>
  </uni-row>
  <!-- #endif -->
</template>
<script>
  export default {
    inheritAttrs: false,
    name: "gd-row",
  };
</script>
<script setup>
  // #ifdef H5
  import { ElRow } from "element-plus";
  import "element-plus/theme-chalk/el-row.css";
  import { GridLayout } from "vue3-drr-grid-layout";
  import "vue3-drr-grid-layout/dist/style.css";
  // #endif
  import { computed, useAttrs } from "vue";
  const props = defineProps({
    isWrappedByGridLayout: {
      type: Boolean,
      default: false,
    },
    layout: {
      type: Array,
      default: () => [],
    },
  });
  const _emits = defineEmits(["update:layout"]);
  const bindingLayout = computed({
    get: () => {
      return props.layout;
    },
    set: (v) => {
      _emits("update:layout", v);
    },
  });
  const _attrs = useAttrs();
  const customizeTag = computed(() => {
    return props.isWrappedByGridLayout ? "grid-layout" : "div";
  });
  const gridLayoutStyle = computed(() => {
    return {
      height: _attrs.style.height,
    };
  });
</script>
<style lang="scss" scoped>
  /* .grid-layout-container :slotted(.vue-grid-layout) {
    height: v-bind("gridLayoutStyle.height");
  }
  .grid-layout-container :deep(.vue-grid-layout) {
    height: v-bind("gridLayoutStyle.height");
  } */
</style>
